/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  SectionList,
  Image
} from 'react-native';

export default class WorkerBookScreen extends Component {
     constructor(props){
       super(props);
       this.state={
           dataSource:null,
       }
     }

    //  componentDidMount(){
    //    this.fetchData();
    //  }

    // async fetchData(){
    //      let data1=[];
    //      data1.push({
    //       icon:"../../image/work/icon_work_daka.png",
    //       title:"新的工友"
    //      });
    //      data1.push({
    //       icon:"../../image/work/icon_work_daka.png",
    //       title:"手机通讯录"
    //      });
    //      let data2=[];
    //      data2.push({
    //       icon:"../../image/work/icon_work_daka.png",
    //       title:"我的班组"
    //      });
    //      data2.push({
    //       icon:"../../image/work/icon_work_daka.png",
    //       title:"我的项目组"
    //      });
    //     let source=[];
    //     source.push({
    //       key:"1",
    //       data:data1
    //     });
    //     source.push({
    //       key:"2",
    //       data:data2
    //     });
    //     this.setState({
    //       dataSource:source
    //     })
    //     console.log(source);
    //  }

     _extraUniqueKey(item,index){
         return 'index'+index+item;
     }

    //  _renderItemView(item){
    //    <View style={{paddingLeft:15}}>
    //    {
    //       this._renderItem(item)
    //    }
    //    <View style={{backgroundColor:'#e1e2e6',height:1}}></View>
    //    </View>
    //   };

    //  _renderItem(item){
    //        item.data.map((itemData,i)=>
    //        <View style={{flexDirection:'row',alignItems:'center'}}>
    //              <Image source={require('../../image/work/icon_work_daka.png')} ></Image>
    //              <Text style={{fontSize:16,marginLeft:8,flex:1}}>{itemData.title}</Text>
    //              <Image source={require('../../image/widget/icon_message_right.png')} style={{marginRight:15}}/>
    //        </View>
    //        )
    //  }

     _renderItem = (info) => {
      var txt = info.item.title;

      return <View style={{backgroundColor:'#ffffff'}}>
        <View style={styles.lineCotainer}>
        <Image resizeMode='stretch' source={require('../../image/work/icon_work_daka.png')} 
        style={{height:32,width:32}}/>
        <Text style={styles.textStyle}>{txt}</Text>
        </View>
        <View style={{height:1,backgroundColor:'#e1e2e6',marginLeft:50}}></View>
        </View>
    }
   
    _sectionComp = (info) => {
      var txt = info.section.key;
      return <Text
        style={{ height: 40, textAlign: 'left', textAlignVertical: 'center', backgroundColor: '#ffffff',
         color: '#5c5f66', fontSize: 16,marginLeft:15 }}>{txt}</Text>
    }

    _renderHeader=()=>{
      return <View style={{backgroundColor:'#ffffff'}}>
           <View style={styles.lineCotainer}>
                  <Image source={require('../../image/workerbook/icon_workers_1.png')} style={styles.image}></Image>
                  <Text style={styles.textStyle}>新的工友</Text>
                  <Image source={require('../../image/widget/icon_message_right.png')} style={{marginRight:15}}/>
           </View>

           <View style={styles.line}></View>

           <View style={styles.lineCotainer}>
                  <Image source={require('../../image/workerbook/icon_workers_2.png')} style={styles.image}></Image>
                  <Text style={styles.textStyle}>手机通讯录</Text>
                  <Image source={require('../../image/widget/icon_message_right.png')} style={{marginRight:15}}/>
           </View>

           <View style={styles.lineSpace}></View>

           <View style={styles.lineCotainer}>
                  <Image source={require('../../image/workerbook/icon_workers_3.png')} style={styles.image}></Image>
                  <Text style={styles.textStyle}>我的班组</Text>
                  <Image source={require('../../image/widget/icon_message_right.png')} style={{marginRight:15}}/>
           </View>

           <View style={styles.line}></View>

           <View style={styles.lineCotainer}>
                  <Image source={require('../../image/workerbook/icon_workers_4.png')} style={styles.image}></Image>
                  <Text style={styles.textStyle}>我的项目组</Text>
                  <Image source={require('../../image/widget/icon_message_right.png')} style={{marginRight:15}}/>
           </View>

           <View style={styles.lineSpace}></View>

           <View style={styles.lineCotainer}> 
                  <Image source={require('../../image/workerbook/icon_workers_5.png')} style={styles.image}></Image>
                  <Text style={styles.textStyle}>创建班组</Text>
                  <Image source={require('../../image/widget/icon_message_right.png')} style={{marginRight:15}}/>
           </View>

           <View style={styles.lineSpace}></View>
      </View>
    }
   
  render() {
    var sections = [
      { key: "A", data: [{ title: "阿童木" }, { title: "阿玛尼" }, { title: "爱多多" }] },
      { key: "B", data: [{ title: "表哥" }, { title: "贝贝" }, { title: "表弟" }, { title: "表姐" }, { title: "表叔" }] },
      { key: "C", data: [{ title: "成吉思汗" }, { title: "超市快递" }] },
      { key: "W", data: [{ title: "王磊" }, { title: "王者荣耀" }, { title: "往事不能回味" },{ title: "王小磊" }, { title: "王中磊" }, { title: "王大磊" }] },
    ];

    return (
      <View style={styles.container}>
        <SectionList
          renderSectionHeader={this._sectionComp}
          renderItem={this._renderItem}
          sections={sections}
          keyExtractor={this._extraUniqueKey}
          ItemSeparatorComponent={() => <View><Text></Text></View>}
          ListHeaderComponent={this._renderHeader}
      
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  lineCotainer:{
    flexDirection:'row',
    alignItems:'center',
    height:48,
    marginLeft:15,
    paddingTop:7,
    paddingBottom:7
  },
  line:{
    height:1,
    backgroundColor:'#e1e2e6',
    marginLeft:50
  },
  lineSpace:{
    height:10,
    backgroundColor:'#f2f3f5'
  },
  image:{
    height:32,
    width:32
  },
  textStyle:{
    color: '#292c33', 
    fontSize: 16 ,
    flex:1,
    marginLeft:8
  }
});
